<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<!-- <re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles.id' prop='id'>
					<el-input v-model.trim='formInline.id' clearable :placeholder='prompt.id' />
				</el-form-item>
			</re-col> -->
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles.factoryName' prop='factoryName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.factoryName' clearable :placeholder='prompt.factoryName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles.contactName' prop='contactName'>
					<el-input v-model.trim='formInline.contactName' clearable :placeholder='prompt.contactName'
						:maxlength="30" show-word-limit />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles.contactPhone' prop='contactPhone'>
					<el-input v-model.trim='formInline.contactPhone' clearable :placeholder='prompt.contactPhone' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.remark' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/product-management/manufacturer-management/index';
import { PHONE_REG } from '@/constant/index'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	factoryName: [{ required: true, message: prompt?.factoryName, trigger: 'blur' },],
	contactName: [{ required: true, message: prompt?.contactName, trigger: 'blur' },],
	contactPhone: [
		{ required: true, message: prompt?.contactPhone, trigger: 'blur' },
		{ pattern: PHONE_REG.role, message: PHONE_REG.text, trigger: 'blur' },
	],
});
const ruleFormRef = ref();
// const newFormInline = ref(props.formInline as infoType);

// watch(() => props.formInline, () => {
// 	console.log(props.formInline);

// 	newFormInline.value = props.formInline
// }, {
// 	deep: true,
// 	immediate: true
// })

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
